<template>
	<leo-list ref="leoListRef" @scroll="leo_list_scroll" @getListApi="leo_getListApi" :loadingMoreEnabled="leo_loadingMoreEnabled" :refresherEnabled="leo_refresherEnabled" :scrollable="leo_scrollable" @getViewInfo="leo_getViewInfo">
		<!-- 四位插槽 -->
		<template #top>
			top
		</template>
		<template #list={dataList}>
			<leo-drag :supportLongpress="false" @pressStart="leo_pressStart" @getAreaStyle="leo_getAreaStyle" @handleMoving="leo_handleMoving" :dragDirection="leo_dragDirection" :swapMode="true" @handleDragStart="leo_handleDragStart" :column="1" ref="leoDragRef" id="leoDragRef" @getList="leo_getList_end" :list="dataList">
				<template #content={data}>
					<!-- 在这里自定义内容**以下是模拟高度不一致的情况 -->
					<view class="drop flex flex-y flex-1" style="padding: 10rpx;">
						<view v-if="data.name % 2 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								-占位高度1-
							</view>
						</view>
						<view v-if="data.name % 8 === 0" class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								-占位高度2-
							</view>
						</view>
						<view class="flex flex-1 flex-center-center" :style="[{'background-color':data.index === data.activeIndex?'red':'aqua'}]">
							<view class="ellipsis flex-1" style="text-align: center;">
								<!--n:{{data.name}} ;y:{{data.y}} ** {{data.index === data.activeIndex}}-->
								-当前拖拽元素的位置-{{data.moveToIndex}}
							</view>
							<uni-icons class="flex-none" @touchstart="leo_changeDisabled(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
						</view>
					</view>
				</template>
				<template #placeholder>
					<view class="drop" style="padding: 0 10rpx;height: 100%;">
						<view class="" style="background-color: #007aff;height: 100%;">
							占位
						</view>
					</view>
				</template>
			</leo-drag>
		</template>
		<template #bottom>
			bottom-列表总数据长度-{{dataListLength}}
		</template>
	</leo-list>
</template>

<script>
	import leoDragList from "@/uni_modules/leo-drag/components/leo-drag/js/leo-drag-list.js"
	export default{
		mixins:[leoDragList],  // 需要引入内部通用函数
		data(){
			return{
				leo_edge:8,		// 边缘6/1位置触发滚动； 此值不传默认为8/1； 注意： 经过测试发现最佳是8，值越小：小程序可能会出现滚动时不出现动画的情况；
				dataListLength:0
			}
		},
		methods:{
			// 获取列表-下拉刷新或者是触底加载都已封装好；只需要传入list和总长度即可
			leo_getListApi(ler_data){
				// 模拟api请求:ler_data中会包含size和page；请根据后端要求自己定义；
				setTimeout(()=>{
					let lists = [];
					for (var i = ler_data.dataList.length; i < ler_data.dataList.length+10; i++) {
						lists.push({name:i})
						this.dataListLength++;
					}
					// 需要传递请求回来的列表和总条数
					ler_data.callback(lists, 300);	// 和complete用法一致, 第二参数需要传递数据库的总数量
				},200)
			}
		}
	}
</script>

<style scoped lang="scss">
.drop{
		
	}
</style>